@import "../_variables";

//------------------------------------------------------------
// Modal Effects
// Some Based on https://github.com/daneden/animate.css
//
// Rewritten for effeckts project
//------------------------------------------------------------

// Modal itself
.effeckt-modal-wrap {

  // Line that causes blur
  // But would be **SUPER RAD** if we could use so modals are centered no matter what author does
  // transform: translate(-50%, -50%);

  // Possible blur fix
  // https://twitter.com/iamwarry/status/354595007937789954
  // Problems:
  //   1) Autoprefixer (?) garbles this to -webkit-transform: translate(-webkit-calc(-50%1px), -webkit-calc(-50%1px));
  //   2) Safari just doesn't allow it even when syntax is right.
  //   3) It doesn't always work. Still blurry = http://cl.ly/QVGo ; Sharp = http://cl.ly/QUgo

  position: fixed;
  // Sizing with sloppy centering so at least not blurry
  top: 50%;
  left: 50%;
  max-width: $effeckt-modal-max-width;
  min-width: $effeckt-modal-min-width;
  transform: translate(-50%, -50%);
  z-index: $effeckt-modal-z-index;
  visibility: hidden;
  backface-visibility: hidden;
}

.effeckt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition-duration: $effeckt-modal-transition-duration;
}

.effeckt-show.effeckt-modal-wrap {
  visibility: visible;

  ~ .effeckt-modal-overlay {
    visibility: visible;
    opacity: 1;
  }
}


.effeckt-modal {
  transition-property: all;
  transition-duration: $effeckt-modal-transition-duration;
  transition-timing-function: cubic-bezier(.4, 0, 0, 1.5);
  animation-duration: $effeckt-modal-animation-duration;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.4, 0, 0, 1.5);
}

@import "../effeckts/modals/scale";
@import "../effeckts/modals/slide";
@import "../effeckts/modals/3ds";
@import "../effeckts/modals/misc";
